import * as echarts from 'echarts/core';
import { BarChart, PieChart, LineChart } from 'echarts/charts';
import type { BarSeriesOption, PieSeriesOption, LineSeriesOption } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent,
    type GridComponentOption,
    TransformComponent,
    ToolboxComponent,
    DataZoomComponent,
    VisualMapComponent,
    TimelineComponent,
    CalendarComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { Http } from './http';
import { isDarkStore } from '@b/store';

export class Dashboard extends Http {
    echart: typeof echarts
    chart?: echarts.ECharts
    options: echarts.ComposeOption<GridComponentOption | BarSeriesOption | PieSeriesOption | LineSeriesOption>;
    search_key: any;
    isDark: 'dark' | 'light';
    dom: HTMLElement | null
    _width: number
    _height: number
    timer: number
    delay: number
    constructor() {
        super()
        this._width = 0
        this._height = 0
        this.options = {}
        this.delay = 0
        const sIsDarkStore = isDarkStore()
        this.echart = echarts
        this.isDark = 'light'
        this.dom = null
        this.timer = 0
        this.isDark = sIsDarkStore.isDark ? 'dark' : 'light'
        sIsDarkStore.watchDark((isDark) => {
            this.isDark = isDark ? 'dark' : 'light'
            const options = this.chart?.getOption()
            if (!options?.series) return
            this.chart?.dispose()
            this.init(this.dom)
            this.chart?.setOption({ series: options.series })
        })
        echarts.use([
            BarChart,
            LineChart,
            PieChart,
            TitleComponent,
            TooltipComponent,
            GridComponent,
            DatasetComponent,
            LegendComponent,
            TransformComponent,
            CanvasRenderer,
            ToolboxComponent,
            DataZoomComponent,
            VisualMapComponent,
            TimelineComponent,
            CalendarComponent
        ])
    }
    init(dom: HTMLElement | null) {
        if (!dom) return
        if (!this.options) return
        this.dom = dom
        const chart = this.echart.init(dom, this.isDark)
        chart.setOption(this.options)
        this.chart = chart
    }
    set width(val: number | string) {
        if (typeof val === 'number') this._width = val
        else this._width = parseFloat(val)
    }
    set height(val: number | string) {
        if (typeof val === 'number') this._height = val
        else this._height = parseFloat(val)
    }
    async setDataLoop(animate: boolean = false) {
        if (this.delay === 0) return
        if (this.timer) clearTimeout(this.timer)
        if (animate)
            this.chart?.setOption(this.options, true)
        await this.setData('recache')
        this.timer = setTimeout(() => {
            this.setDataLoop(animate)
        }, this.delay)
    }
    resize() {
        this.chart?.resize()
    }
    _setData(...args: any[]) {
        throw new Error('_SetData method not implemented ' + args)
    }
    async setData(cache: 'cache' | 'recache' = 'cache') {
        throw new Error('SetData method not implemented ' + cache)
    }
    dispose() {
        clearTimeout(this.timer)
        this.chart?.dispose()
    }
}